<template>
  <div class="content">
    <div class="register">
      <!--注册表单-->
      <el-form :model="registerForm" :rules="registerRule" ref="registerRef" class="register_form">
        <el-form-item label="账号" prop="username" label-width="60px">
          <el-input prefix-icon="el-icon-user" v-model="registerForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname" label-width="60px">
          <el-input prefix-icon="el-icon-collection-tag" v-model="registerForm.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="60px">
          <el-input prefix-icon="el-icon-message" v-model="registerForm.email"
                    placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="60px">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="registerForm.password"
                    placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认" prop="confirm_password" label-width="60px">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="registerForm.confirm_password"
                    placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone" label-width="60px" class="phone">
          <el-input prefix-icon="el-icon-mobile-phone" v-model="registerForm.phone"
                    placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <div class="link_register">已有账号?请
          <el-link type="primary" class="link_text" href="/login">登录</el-link>
        </div>
        <el-form-item>
          <el-button type="primary" @click="userRegister" class="registerBtn">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register, repeatUsername } from '../api/api'
import CryptoJS from 'crypto-js'

export default {
  data () {
    // var checkEmail = (rule, value, callback) => {
    //   if (value) {
    //     repeatEmail(value).then(response => {
    //       if (response.data.code === 0) callback()
    //       callback(new Error(response.data.message.email))
    //     })
    //   }
    // }
    const checkUsername = (rule, value, callback) => {
      if (value) {
        repeatUsername(value).then(response => {
          if (response.data.code === 0) callback()
          callback(new Error(response.data.message.username))
        })
      }
    }
    const checkPasswordDifferent = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('确认密码与密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        username: '',
        nickname: '',
        email: '',
        password: '',
        confirm_password: '',
        phone: '',
        key: ''
      },
      tmpRegisterForm: {},
      chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
      registerRule: {
        username: [
          {
            required: true,
            message: '账号不能为空！',
            trigger: ['blur']
          },
          {
            min: 2,
            max: 20,
            message: '账号长度为 2 到 20 个字符！',
            trigger: ['blur']
          },
          {
            validator: checkUsername,
            trigger: ['blur']
          }
        ],
        nickname: [
          {
            min: 2,
            max: 20,
            message: '昵称长度为 2 到 20 个字符！',
            trigger: ['blur']
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱地址不能为空！',
            trigger: ['blur']
          },
          {
            type: 'email',
            message: '邮箱地址格式有误！',
            trigger: ['blur']
          }
          // ,
          // {
          //   validator: checkEmail,
          //   trigger: ['blur']
          // }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空！',
            trigger: ['blur']
          },
          {
            min: 6,
            max: 20,
            message: '密码长度为 6 到 20 个字符！',
            trigger: ['blur']
          }
        ],
        confirm_password: [
          {
            required: true,
            message: '确认密码不能为空！',
            trigger: ['blur']
          },
          {
            min: 6,
            max: 20,
            message: '确认密码长度为 6 到 20 个字符！',
            trigger: ['blur']
          },
          {
            validator: checkPasswordDifferent,
            trigger: ['blur']
          }
        ],
        phone: [
          {
            pattern: /1[3-9][0-9]{9}/,
            message: '手机号码格式有误！',
            trigger: ['blur']
          },
          {
            max: 11,
            message: '手机号码格式有误！',
            trigger: ['blur']
          }
        ]
      }
    }
  },
  methods: {
    // 用户注册
    userRegister () {
      this.$refs.registerRef.validate(valid => {
        if (!valid) return
        for (let i = 0; i < 16; i++) {
          this.registerForm.key += this.chars[Math.floor(Math.random() * this.chars.length)]
        }
        this.tmpRegisterForm = this.registerForm
        this.registerForm.password = CryptoJS.AES.encrypt(
          CryptoJS.enc.Utf8.parse(this.registerForm.password),
          CryptoJS.enc.Utf8.parse(this.registerForm.key),
          { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }).toString()
        this.registerForm.confirm_password = CryptoJS.AES.encrypt(
          CryptoJS.enc.Utf8.parse(this.registerForm.confirm_password),
          CryptoJS.enc.Utf8.parse(this.registerForm.key),
          { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }).toString()
        register(this.registerForm)
          .then(response => {
            if (response.data.code !== 0) {
              this.registerForm = this.tmpRegisterForm
              return this.$message.error('注册失败！')
            }
            this.$message.success('注册成功！')
            window.sessionStorage.setItem('token', response.data.data.token)
            window.sessionStorage.setItem('username', response.data.data.username)
            this.$router.push('/index')
            this.registerForm = {
              username: '',
              nickname: '',
              email: '',
              password: '',
              confirm_password: '',
              phone: '',
              key: ''
            }
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  /*全局背景*/
  .content {
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    position: fixed;
    /*position: absolute;*/
    /*background-size: cover;*/
    /*overflow: auto;*/
  }

  /*登录表单*/
  .register {
    width: 400px;
    height: 465px;
    padding: 45px 35px 0 20px;
    background: rgba(255, 255, 255, 1);
    /*box-shadow: rgb(11, 234, 235) 0px 0px 5px inset;*/
    border: 1px solid #000000;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .phone {
    margin-bottom: 5px;
  }

  /*输入框*/
  /deep/ .el-input__inner {
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
  }

  /deep/ .el-input__inner:focus {
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
  }

  /*登录链接*/
  .link_register {
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .link_text {
    font-size: 10px;
  }

  /*注册按钮*/
  .registerBtn {
    width: 95%;
    color: #000000;
    margin-left: 20px;
    margin-top: 10px;
    letter-spacing: 20px;
  }

  /deep/ .el-button--primary {
    background: transparent;
    border: 1px solid rgb(0, 0, 0);
  }

  /deep/ .el-button--primary:hover {
    color: #000000;
    background: #f5f7fa;
    border: 1px solid rgb(0, 0, 0);
  }
</style>
